<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./../style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/webuploader.css"/>
    <title>自定义上传</title>
</head>
<body>
<div style="padding:20px;">
    <div id="uploader">
        <div id="uploadPicker"></div>
        <ul id="uploadList"></ul>
    </div>
    <input type="file" accept="image/*" onchange="handleImageUpload(event);">
</div>
<script type="text/javascript" src="./../jquery.js"></script>
<script type="text/javascript" src="../../dist/webuploader.js"></script>
<script type="text/javascript" src="./upload.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.1/dist/browser-image-compression.js"></script>

<script>
    window.handleImageUpload = function(event) {
        const imageFile = event.target.files[0];
          const options = {
            maxSizeMB: 1,
            maxWidthOrHeight: 1920,
          }
          console.log(imageFile);
          imageCompression(imageFile, options).then(compressedFile => {
            console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
            console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`);
          }).catch(error => {
            console.log(error.message);
          });
    };
</script>
</body>
</html>
